<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
      
        <defs>
          <filter id="f1">
            <feComponentTransfer in="SourceGraphic">
                <!-- new_r = slope * r + intercept -->
                <feFuncR type="identity" type="linear" slope="2" intercept="0"></feFuncR>
                <feFuncG type="linear" slope="1" intercept=".5"></feFuncG>
            </feComponentTransfer>
          </filter>
        </defs>

        <rect x="20" y="20" width="40" height="30" fill="rgba(178,0,0,1)" filter="url(#f1)"/>
        
        <rect x="20" y="60" width="40" height="30" fill="rgba(178,0,0,1)"/>

    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      
      <defs>
        <filter id="f2">
          <feComponentTransfer in="SourceGraphic">
              <!-- new_r = slope * r + intercept -->
              <feFuncR type="linear" slope="1.5" intercept="-.2"></feFuncR>
              <feFuncG type="linear" slope="1.5" intercept="-.2"></feFuncG>
              <feFuncB type="linear" slope="1.5" intercept="-.2"></feFuncB>
          </feComponentTransfer>
        </filter>
      </defs>

     <image href="../imgs/6.png" x="0" y="0" height="60" width="60" filter="url(#f2)"/>
     <image href="../imgs/6.png" x="0" y="50" height="60" width="60"/>

  </svg>

  <svg width="400" height="400" viewBox="0 0 100 100">
        
      <defs>
        <filter id="f3">
          <feComponentTransfer in="SourceGraphic">
              <!-- new_r = amplitude * pow(r,exponent) + offset -->
              <feFuncR type="gamma"  amplitude="1" exponent=".5" offset="0"></feFuncR>
              <feFuncG type="gamma"  amplitude="1" exponent=".5" offset="0"></feFuncG>
              <feFuncB type="gamma"  amplitude="1" exponent=".5" offset="0"></feFuncB>
          </feComponentTransfer>
        </filter>
      </defs>

    <image href="../imgs/6.png" x="0" y="0" height="60" width="60" filter="url(#f3)"/>
    <image href="../imgs/6.png" x="0" y="50" height="60" width="60"/>

  </svg>

  <svg width="400" height="400" viewBox="0 0 100 100">
        
    <defs>
      <filter id="f4">
        <feComponentTransfer in="SourceGraphic">
            <!-- new_r = amplitude * pow(r,exponent) + offset -->
            <feFuncR type="gamma"  amplitude="1" exponent=".5" offset="0"></feFuncR>
            <feFuncG type="gamma"  amplitude="1" exponent="1" offset="0"></feFuncG>
            <feFuncB type="gamma"  amplitude="1" exponent="1" offset="0"></feFuncB>
        </feComponentTransfer>
      </filter>
    </defs>

    <g filter="url(#f4)">
      <rect x="20" y="20" width="20" height="20" fill="rgb(100,0,0)"/>
      <rect x="40" y="20" width="20" height="20" fill="rgb(200,0,0)"/>
    </g>

    <g transform="translate(0,30)">
      <rect x="20" y="20" width="20" height="20" fill="rgb(100,0,0)"/>
      <rect x="40" y="20" width="20" height="20" fill="rgb(200,0,0)"/>
    </g>

  </svg>

  <svg width="400" height="400" viewBox="0 0 100 100">
        
    <defs>
      <filter id="f5">
        <feComponentTransfer in="SourceGraphic">
            <feFuncR type="table" tableValues="0 0.8 1" ></feFuncR>
        </feComponentTransfer>
      </filter>
    </defs>

    <g filter="url(#f5)">
      <rect x="20" y="20" width="20" height="20" fill="rgb(50,0,0)"/>
      <rect x="40" y="20" width="20" height="20" fill="rgb(200,0,0)"/>
    </g>

    <g transform="translate(0,30)">
      <rect x="20" y="20" width="20" height="20" fill="rgb(50,0,0)"/>
      <rect x="40" y="20" width="20" height="20" fill="rgb(200,0,0)"/>
    </g>

  </svg>

  <svg width="400" height="400" viewBox="0 0 100 100">
        
    <defs>
      <filter id="f6">
        <feComponentTransfer in="SourceGraphic">
            <feFuncR type="table" tableValues="0 1 1" ></feFuncR>
            <feFuncG type="table" tableValues="1 1" ></feFuncG>
        </feComponentTransfer>
      </filter>
    </defs>

    <g filter="url(#f6)">
      <rect x="20" y="20" width="20" height="20" fill="rgb(50,0,0)"/>
      <rect x="40" y="20" width="20" height="20" fill="rgb(200,0,0)"/>
    </g>

    <g transform="translate(0,30)">
      <rect x="20" y="20" width="20" height="20" fill="rgb(50,0,0)"/>
      <rect x="40" y="20" width="20" height="20" fill="rgb(200,0,0)"/>
    </g>

  </svg>

  <svg width="400" height="400" viewBox="0 0 100 100">
        
    <defs>
      <filter id="f7">
        <feComponentTransfer in="SourceGraphic">
            <feFuncR type="discrete" tableValues="0 0.5 1" ></feFuncR>
        </feComponentTransfer>
      </filter>
    </defs>

    <g filter="url(#f7)">
      <rect x="20" y="20" width="20" height="20" fill="rgb(50,0,0)"/>
      <rect x="40" y="20" width="20" height="20" fill="rgb(200,0,0)"/>
    </g>

    <g transform="translate(0,30)">
      <rect x="20" y="20" width="20" height="20" fill="rgb(50,0,0)"/>
      <rect x="40" y="20" width="20" height="20" fill="rgb(200,0,0)"/>
    </g>

  </svg>

    <script src="index.js"></script>
  </body>
</html>
